<template>
	<view class="">
		<view style="width: 750rpx;height: 20rpx;background-color:#F9F9F9 ;"></view>
		<view class="box1">
			<view class="">
			<text style="font-size: 14px;font-weight: 600;line-height: 30px;color: #666666;">商机阶段</text>
				<view class="scmain">
					<view class="" v-for="(item, index) in mydatass" :key="index" @click="lianxiclick(index)" :class="index === lianxi ? 'activelianxi2' : 'scitem'">
						{{ item }}
					</view>
				</view>
			</view>
		</view>

		<view class="box1">
			<view class="">
			<text style="font-size: 14px;font-weight: 600;line-height: 30px;color: #666666;">商机来源</text>
				<view class="scmain">
					<view class="" v-for="(item, index) in myxiansuos" :key="index" @click="lianxiclick2(index)" :class="index === lianxi2? 'activelianxi2' : 'scitem'">
						{{ item }}
					</view>
				</view>
			</view>
		</view>

		<view class="box1">
			<view class="">
				<text style="font-size: 14px;font-weight: 600;line-height: 30px;color: #666666;">成交几率</text>
				<view class="scmain">
					<view class="scitem" v-for="(item, index) in mystatus" :key="index" @click="lianxiclick3(index)" :class="index === lianxi3 ? 'activelianxi2' : 'scitem'">
						{{ item }}
					</view>
				</view>
			</view>
		</view>

	

		<view class="box1" style="">
			<text style="font-size: 14px;font-weight: 600;line-height: 30px;color: #666666;">关键词查询</text>
			<input style="height: 80rpx;padding-left: 10px;" class="myinput" placeholder="商机标题/客户名称" />
		</view>

		<view class="box1">
		<text style="font-size: 14px;font-weight: 600;line-height: 30px;color: #666666;">负责销售</text>
			<view class="box2">
				<view class="members">
					<view class="absolute"><u-icon style="background-color:#0079FE ;color:white ;border-radius: 50%;font-size: 30rpx;" name="checkbox-mark"></u-icon></view>

					<image src="../static/toux.jpg" mode=""></image>
					<view class="">赵小刚</view>
				</view>
				<view class="members">
					<view class="absolute"><u-icon style="background-color:#0079FE ;color:white ;border-radius: 50%;font-size: 30rpx;" name="checkbox-mark"></u-icon></view>
					<image src="../static/toux.jpg" mode=""></image>
					<view class="">周小明</view>
				</view>
				<view class="members">
					<view class="absolute"><u-icon style="background-color:#0079FE ;color:white ;border-radius: 50%;font-size: 30rpx;" name="checkbox-mark"></u-icon></view>
					<image src="../static/toux.jpg" mode=""></image>
					<view class="">郭小涛</view>
				</view>
				<view class="members">
					<view class="absolute"><u-icon style="background-color:#0079FE ;color:white ;border-radius: 50%;font-size: 30rpx;" name="checkbox-mark"></u-icon></view>
					<image src="../static/toux.jpg" mode=""></image>
					<view class="">张小伟</view>
				</view>
				<view class="members">
					<view class="absolute"><u-icon style="background-color:#0079FE ;color:white ;border-radius: 50%;font-size: 30rpx;" name="checkbox-mark"></u-icon></view>
					<image src="../static/toux.jpg" mode=""></image>
					<view class="">张小伟</view>
				</view>
				<view class="members">
					<image src="../static/toux.jpg" mode=""></image>
					<view class="">更多</view>
				</view>
			</view>
		</view>

		<view class="indexbo">
			<view class="indbu" v-for="(item, index) in buttons" :key="index" :class="current === index ? 'active1' : ''" @click="changecolor(index)">{{ item }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mydatass: ['初步洽谈', '深入沟通', '合同生成', '流失商机'],//商机阶段
			myxiansuos: ['电话营销', '主动来电', '客户介绍', '朋友介绍', '独立开发', '网络搜索', '广告杂志', '展会促销', '其他途径'], //商机来源
			mystatus: ['10','20','30','40','50','60','70','80','90','100'],//成交几率
			

			current: '',
			lianxi: '', //商机阶段
			lianxi2: '', //商机来源点击
			lianxi3: '', //成交几率点击
			
			buttons: ['重置', '确认'],
			show: false,
			
			selectinput:'',
			showcal:false,
			mode: 'range',
			finaltime:''
		};
	},
	components: {},
	methods: {
		//商机阶段点击
		lianxiclick(index) {
			this.lianxi = index;
		},
		//商机来源点击
		lianxiclick2(index) {
			
			this.lianxi2 = index;
			/* console.log(this.lianxi2[index]); */
		},
		//成交几率点击
		lianxiclick3(index) {
		
			this.lianxi3 = index;
		},
		//筛选底部按钮点击确认重置
		changecolor(index) {
			this.transdata=[this.lianxi,this.lianxi2,this.lianxi3];
			this.iscurrent = 3;
			if (index === 1) {
				this.$emit('closetemp',this.transdata)
				console.log('改变');
			}
			if (index === 0) {
				this.$emit('closetemp','')
				console.log('重置');
			}
		},
		selectconfirm(e){
			console.log(e[0].value);
			this.selectinput=e[0].label;
		},
		calchange(e){
			console.log(e);
			this.finaltime=e.startDate +'到'+e.endDate;
		}
	}
};
</script>

<style lang="scss">
.box1 {
	padding: 20rpx;
    color: #999999;
}

.scmain {
	padding: 10rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	.activelianxi {
		color: #52c1f5;
		border: 1px solid #52c1f5;
		width: 200rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.activelianxi2 {
		color: #52c1f5;
		border: 1px solid #52c1f5;
		width: 200rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		text-align: center;
		line-height: 60rpx;
		background-image: url(../static/jiaoluo.jpg);
		background-position: bottom right;
		background-repeat: no-repeat;
		image {
			width: 16rpx;
			height: 20rpx;
		}
	}
	/* justify-content: space-between; */
	.scitem {
		border: 1px solid #eee;
		width: 200rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}
}
.myinput {
	width: 700rpx;
	height: 100rpx;
	border: 1px solid #eeeeee;
}
.indexbo {
	display: flex;
	.indbu {
		width: 50%;
		height: 100rpx;
		box-sizing: border-box;
		border: 1rpx solid #eee;
		text-align: center;
		line-height: 100rpx;
		color: #1678ff;
	}
	.active1 {
		color: #ffffff;
		background-color: #1678ff;
	}
}
.box2 {
	display: flex;
	padding: 20rpx;
	justify-content: space-between;
}
.members {
	width: 130rpx;
	height: 130rpx;
	position: relative;
	/* display: flex;
	flex-direction: column;
	justify-content: space-between; */
	/* background-image: url(../static/toudui.jpg);
		background-repeat: no-repeat;
		background-position: 80rpx 0rpx; */
	.absolute {
		position: absolute;
		top: 00rpx;
		left: 70rpx;
		z-index: 99;
	}
	image {
		width: 100rpx;
		height: 80rpx;
	}
}
.diysx {
	width: 710rpx;
	height: 200rpx;
	color: #1678ff;
	text-align: center;
	line-height: 200rpx;
}
</style>
